<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图-按比例轨迹移动</title>
		<link rel="stylesheet" type="text/css" href="../css/common.css"></link>
    </head>
    <body> 
        <!--地图容器-->
		<div id="mapDiv" style="height: 450px;margin: 2%;"></div>
		
		<div class="content" align="center">
			<a class="button" href="javascript:start()">开始</a>
			<a class="button" href="javascript:pause()">暂停</a>
			<a class="button" href="javascript:stop()">停止</a>
        </div>
    </body>
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=e83d04f3e04272b8d9e91615e309fe36"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
    <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>
	<!-- CarTrack.js中第94行是自己添加上去的 -->
    <script src="../js/CarTrack.js"></script>
    <script type="text/javascript">
        var map;
        var drivingRoute;
		var lnglats = [
			{"lng":"106.63724","lat":"30.48044"},// 起点  
			{"lng":"106.58856","lat":"30.45439"}// 终点
		];
		var zoom;
		
		$(document).ready(function (){
			//获取所有经纬度中的最大、最小经纬度值
			var maxMinLnglat = commonUtils.getMaxMinLnglat(lnglats);
			//获取最大、最小经纬度的中间经纬度
			var middleLnglat = commonUtils.getMiddleLnglat(maxMinLnglat);
			//通过最大最小经纬度获取地图缩放级别
			zoom = commonUtils.getZoom(maxMinLnglat.maxLnglat[0], maxMinLnglat.maxLnglat[1], maxMinLnglat.minLnglat[0], maxMinLnglat.minLnglat[1]);
			// 加载地图
			onLoad(middleLnglat, zoom);
		});
		
		
        var _CarTrack;
        var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";    //起点图标
        var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";        //终点图标
        function onLoad(middleLnglat, zoom) {
            map = new T.Map('mapDiv');
            map.centerAndZoom(new T.LngLat(middleLnglat[0], middleLnglat[1]), zoom);
            map.addControl(TMAP_HYBRID_MAP);
            var config = {
                policy: 0,    //驾车策略
                onSearchComplete: searchResult    //检索完成后的回调函数
            };
            drivingRoute = new T.DrivingRoute(map, config);
            searchDrivingRoute()
        }
		

        function searchDrivingRoute() {
            map.clearOverLays();
            var startLngLat = new T.LngLat(lnglats[0].lng, lnglats[0].lat);
            var endLngLat = new T.LngLat(lnglats[1].lng, lnglats[1].lat);
            //驾车路线搜索
            drivingRoute.search(startLngLat, endLngLat);
        }

        function createRoute(lnglats) {
            _CarTrack = new T.CarTrack(map, {
                interval: 10,//间隔多少毫秒移动一次
                speed: 5,//速度
                dynamicLine: true,
                Datas: lnglats,
                polylinestyle: {color: "#2C64A7", width: 5, opacity: 0.9}
            })
        }

        //添加起始点
        function createStartMarker(result) {
            var startMarker = new T.Marker(result.getStart(), {
                icon: new T.Icon({
                    iconUrl: startIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(startMarker);
            var endMarker = new T.Marker(result.getEnd(), {
                icon: new T.Icon({
                    iconUrl: endIcon,
                    iconSize: new T.Point(44, 34),
                    iconAnchor: new T.Point(12, 31)
                })
            });
            map.addOverLay(endMarker);
        }
        
        function searchResult(result) {
            //添加起始点
            createStartMarker(result);
            //获取方案个数
            var routes = result.getNumPlans();
            for (var i = 0; i < routes; i++) {
                //获得单条驾车方案结果对象
                var plan = result.getPlan(i);
				console.log(plan.getPath());
                createRoute(plan.getPath());
            }
        }
		
		function start(){
			_CarTrack.start();
			zoom = 15;
		}
		function pause(){
			_CarTrack.pause();
		}
		function stop(){
			_CarTrack.stop();
			
			//获取所有经纬度中的最大、最小经纬度值
			var maxMinLnglat = commonUtils.getMaxMinLnglat(lnglats);
			//获取最大、最小经纬度的中间经纬度
			var middleLnglat = commonUtils.getMiddleLnglat(maxMinLnglat);
			//通过最大最小经纬度获取地图缩放级别
			zoom = commonUtils.getZoom(maxMinLnglat.maxLnglat[0], maxMinLnglat.maxLnglat[1], maxMinLnglat.minLnglat[0], maxMinLnglat.minLnglat[1]);
			map.centerAndZoom(new T.LngLat(middleLnglat[0], middleLnglat[1]), zoom);
		}
		
		var commonUtils = {
			/**
			 * 求某个经纬度的值的角度值 
			 */
			getCalcDegree: function (d){
				return d*Math.PI/180.0 ;  
			},
			/**
			 * 根据两点经纬度值，获取两地的实际相差的距离 
			 * @param sLngLat 起点经纬度
			 * @param eLngLat 终点经纬度
			 */
			getCalcDistance: function (sLngLat, eLngLat){
				var slng = commonUtils.getCalcDegree(sLngLat.lng) ;  
				var slnt = commonUtils.getCalcDegree(sLngLat.lat) ;  
				var elng = commonUtils.getCalcDegree(eLngLat.lng) ;  
				var elnt = commonUtils.getCalcDegree(eLngLat.lat) ;  
				  
				var result = Math.sin(slng)*Math.sin(elng) ;  
				result += Math.cos(slng)*Math.cos(elng)*Math.cos(slnt-elnt) ;  
				return Math.acos(result)*6378137.0 ;  
			},
			/**
			 * 获取所有经纬度中的最大、最小经纬度值
			 */
			getMaxMinLnglat: function(lnglats){
				// 获取最大、最小的经度
				var maxLng = lnglats[0].lng, minLng=lnglats[0].lng;
				// 获取最大最小的纬度
				var maxLat = lnglats[0].lat, minLat = lnglats[0].lat;
				$.each(lnglats, function(i, res) {
					if(res.lng > maxLng) maxLng =res.lng;
					if(res.lng < minLng) minLng =res.lng;
					if(res.lat > maxLat) maxLat =res.lat;
					if(res.lat < minLat) minLat =res.lat;
				});
				return {"maxLnglat": [maxLng, maxLat], "minLnglat": [minLng, minLat]}
			},
			/**
			 * 获取最大、最小经纬度的中间经纬度
			 * @param maxMinLnglat 最大、最小经纬度值 格式:{"maxLnglat": [113.307444, 23.189068], "minLnglat": [110.307444, 20.189068]}
			 */
			getMiddleLnglat: function (maxMinLnglat){
				var maxLngLat = maxMinLnglat.maxLnglat;
				var minLngLat = maxMinLnglat.minLnglat;
				var cenB =(parseFloat(maxLngLat[0])+parseFloat(minLngLat[0]))/2;
				var cenL= (parseFloat(maxLngLat[1])+parseFloat(minLngLat[1]))/2;
				return [cenB, cenL];
			},
			/**
			 * 通过最大最小经纬度获取地图缩放级别
			 * @param maxLng 最大的经度
			 * @param maxLat 最大的纬度
			 * @param minLng 最小的经度
			 * @param minLat 最小的纬度
			 */
			getZoom: function (maxLng, maxLat, minLng, minLat) {
				if (maxLat == minLat && maxLng == minLng) return 13;
				var diff = maxLat - minLat;
				if (diff < (maxLng - minLng) * 2.1) diff = (maxLng - minLng) * 2.1;
				diff = parseInt(10000 * diff) / 10000;

				var zoomArr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18);
				var diffArr = new Array(180, 90, 45, 22.5, 11.25, 5.625, 2.8125, 1.40625, 0.70313, 0.35126, 0.17578, 0.08789, 0.04395, 0.02197, 0.010986, 0.0054931,0.00274658, 0.001373291);

				for (var i = 0; i < diffArr.length; i++) {
					if ((diff - diffArr[i]) >= 0) {
						return zoomArr[i];
					}
				}
				return 11;
			}
		};
    </script>
</html>